<template>
    <div class="recordDetail">
      <Navbar
        appTitle="工单详情"
        :rname="'stop-circle-o'"
        @ClickRight="$router.push('/application')"
      />
      <!--头部-->
      <div class="d-head no-pading">
        <div class="content">
          <div class="left d-head-left-box">
            <div class="title">{{ detailInfo.orderCode || "-" }}</div>
            <div class="row">
              <span class="r-label">生产物料：</span>
              <span class="r-column"
                >{{ detailInfo.serialNumber || "-" }} |
                {{ detailInfo.serialName || "-" }} |
                {{ detailInfo.serialSpecifications || "-" }}</span
              >
            </div>
            <div class="row">
              <span class="r-label">单位：</span>
              <span class="r-column">{{ detailInfo.unitName || "-" }}</span>
            </div>
            <div class="row">
              <span class="r-label">计划时间：</span>
              <span class="r-column"
                >{{ detailInfo.planStartTime || "-" }} ~
                {{ detailInfo.planEndTime || "-" }}</span
              >
            </div>
            <div class="row">
              <span class="r-label">任务生产数量：</span>
              <span class="r-column">{{ detailInfo.planProduceNum || 0 }}</span>
            </div>
            <div class="row">
              <span class="r-label">关联订单：</span>
              <span class="r-column">{{ detailInfo.sellOrderCode || "-" }}</span>
            </div>
  
            <div class="pandianBox">
              <div
                class="status"
                :style="{
                  color: orderStatusFn(detailInfo.orderStatus).color,
                  backgroundColor: orderStatusFn(detailInfo.orderStatus).bcColor,
                }"
              >
                {{ orderStatusFn(detailInfo.orderStatus).text }}
              </div>
            </div>
          </div>
          <div class="right">
            <img
              class="rightImg"
              v-if="detailInfo.flowStatus == 'RUNNING'"
              src="@/assets/img/shenpizhong.png"
              alt=""
            />
            <img
              class="rightImg"
              v-if="detailInfo.flowStatus == 'AGREE'"
              src="@/assets/img/yitongguo.png"
              alt=""
            />
            <img
              class="rightImg"
              v-if="detailInfo.flowStatus == 'REFUSE'"
              src="@/assets/img/yijujue.png"
              alt=""
            />
            <img
              class="rightImg"
              v-if="detailInfo.flowStatus == 'TERMINATED'"
              src="@/assets/img/yichehui.png"
              alt=""
            />
          </div>
        </div>
  
        <van-tabs v-model="active" class="tabs-atv-class">
          <van-tab title="任务信息"> </van-tab>
  
          <van-tab title="自定义信息"> </van-tab>
  
          <van-tab title="生产报工"> </van-tab>
  
          <van-tab disabled></van-tab>
          
        </van-tabs>
      </div>
      <!-- taps-->
      <div class="tabs-f">
        
        <div class="goodsWrap" v-if="active == 0">
          <div class="goodsList" v-if="taskList.length > 0">
            <div class="goodsBox" v-for="(item, index) in taskList" :key="index">
              <div class="content">
                <div class="icon"></div>
                <div class="right">
                  <div class="top">
                    <p class="code">
                      {{ item.processesName }}
                    </p>
                  </div>
                  <div class="numList">
                    <div class="item">
                      <p class="ikey">计划数</p>
                      <p>{{ item.planNum }}</p>
                    </div>
                    <div class="item">
                      <p class="ikey">合格数</p>
                      <p>{{ item.qualifiedNum }}</p>
                    </div>
                    <div class="item noBorder">
                      <p class="ikey">不合格数</p>
                      <p>{{ item.unqualifiedNum }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <van-empty v-else description="任务信息为空" />
        </div>
  
        <div class="goodsWrap" v-if="active == 1">
          <!-- 自定义信息 -->
          <div class="otherTaps" v-if="detailInfo.extDataJson.length > 0">
            <div class="content">
              <div
                class="row"
                v-for="(item, index) in detailInfo.extDataJson"
                :key="index"
              >
                <span class="r-label">自定义字段{{ index + 1 }}：</span>
                <span class="r-column"> {{ item.fieldValue || "-" }} </span>
              </div>
            </div>
          </div>
          <van-empty v-else description="自定义信息为空" />
        </div>
        <div class="goodsWrap" v-if="active == 2">
          <div class="goodsList" v-if="artisanList.length > 0">
            <div
              class="goodsBox"
              v-for="(item, index) in artisanList"
              :key="index"
            >
              <div class="content pading-btm-0">
                <div class="icon"></div>
                <div class="right">
                  <div class="top">
                    <p class="code">
                      {{ item.userText || "-" }} | {{ item.processesName || "-" }}
                    </p>
                  </div>
                  <div class="rt-row">
                    <div class="column">
                      <span class="column-t">合格数：</span>
                      <span class="column-c">{{ item.qualifiedNum || 0 }}</span>
                    </div>
                  </div>
                  <div class="rt-row">
                    <div class="column">
                      <span class="column-t">不合格数：</span>
                      <span class="column-c">{{ item.unqualifiedNum || 0 }}</span>
                    </div>
                  </div>
  
                  <div class="rt-row">
                    <div class="column">
                      <span class="column-t">报工时间：</span>
                      <span class="column-c">{{ item.reportTime || "-" }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <van-empty v-else description="生产报工为空" />
        </div>
      </div>
  
      <!--提交按钮 -->
      <div v-if="$route.query.applyType == 'waiterDeal'" class="search-bottom">
        <span class="btncancel" @click="cancel">拒绝</span>
        <span class="btnconfirm" @click="confirm">同意</span>
      </div>
    </div>
  </template>
  
  <script>
  import Navbar from "@/components/navBar/navBar_right";
  import Examine from "@/components/examine";
  import { getAction, postAction } from "@/api/manage";
  import { apiBaseUrlDownload } from "@/utils/request";
  import { APILX } from "@/api/requestLx";
  import { formTypeExtendedFieldList } from "@/api/mobile";
  const getFileListByIds = (params) =>
    getAction("/sys/common/getFileListByIds", params);
  export default {
    name: "customerDetail", //客户详情
    components: { Navbar, Examine },
    data() {
      return {
        taskList: [],
        artisanList: [],
        resultInfo: {
          reportCountNum: 0,
          unqualifiedCountNum: 0,
          qualifiedCountNum: 0,
        },
        orderList: [],
        abnormalList: [],
        normalList: [],
        allList: [],
        tabAbNormal: "0",
        tabNormal: "0",
        active: 0,
        detailInfo: {
          extDataJson: [],
        },
        formTypeExtendedFields: [],
        title: this.$route.meta.title,
        fileIds: "",
        imgUrlList: [],
      };
    },
    computed: {},
    mounted() {},
    created() {
      // this.detailInfo = this.$route.query.item
      this.getDetail();
    },
    methods: {
      orderStatusFn(v) {
        if (v == 0) {
          return {
            text: "未开始",
            color: "#ff9900",
            bcColor: "#fff5e6",
          };
        } else if (v == 1) {
          return {
            text: "生产中",
            color: "#2B85E4",
            bcColor: "#EAF3FC",
          };
        } else if (v == 2) {
          return {
            text: "已完成",
            color: "#19BE6B",
            bcColor: "#E8F9F0",
          };
        } else if (v == 3) {
          return {
            text: "已取消",
            color: "#ff9900",
            bcColor: "#fff5e6",
          };
        } else {
          return {
            text: "-",
            color: "#ff9900",
            bcColor: "#fff5e6",
          };
        }
      },
      cancel() {
        // approveType 1:同意 0:拒绝
        this.$router.push({
          path: "/approval",
          query: { approveType: 0, taskId: this.$route.query.taskId },
        });
      },
      confirm() {
        // approveType 1:同意 0:拒绝
        this.$router.push({
          path: "/approval",
          query: { approveType: 1, taskId: this.$route.query.taskId },
        });
      },
      // 获取详情
      async getDetail() {
        // 获取报工自定义表单字段;
        await formTypeExtendedFieldList({ formType: 3 }).then((res) => {
          if (res.code == 200 && res.result) {
            this.formTypeExtendedFields = res.result;
          }
        });
  
        let id = this.$route.query.taskId;
        APILX.produceOrderInfoQueryById({ id }).then((res) => {
          if (res.code == 200) {
            this.detailInfo = res.result;
  
            for (const item in this.detailInfo.extDataJson) {
              this.formTypeExtendedFields.map((ele) => {
                if (ele.fieldKey == item) {
                  ele.fieldValue = this.detailInfo.extDataJson[item];
                }
              });
            }
            this.detailInfo.extDataJson = this.formTypeExtendedFields;
  
            APILX.produceOrderTaskList({
              pageNo: 1,
              pageSize: 1000,
              orderId: id,
            }).then((res2) => {
              if (res2.code == 200) {
                this.taskList = res2.result.records;
                console.log(
                  this.taskList,
                  "this.taskListthis.taskListthis.taskListthis.taskList"
                );
              }
            });
  
            APILX.produceOrderReportWorkList({
              pageNo: 1,
              pageSize: 1000,
              orderId:id,
            }).then((res3) => {
              if (res3.code == 200) {
                this.artisanList = res3.result.records;
              }
            });
          } else {
            this.$toast(res.message);
          }
        });
      },
      getTable(tabStatus) {
        let param = {
          id: this.$route.query.id,
          // id: "1517028753530834945",
          status: tabStatus,
          pageNo: "1",
          pageSize: "9999",
        };
        (this.abnormalList = []),
          (this.normalList = []),
          (this.allList = []),
          APILX.getWmsInventoryGoodsList(param).then((res) => {
            if (res.code == 200) {
              this.listData(res.result.records);
              let tableData = res.result.records;
              if (param.status == "abnormal") {
                this.tabAbNormal = res.result.total;
                this.abnormalList = tableData;
              } else if (param.status == "normal") {
                this.tabNormal = res.result.total;
                this.normalList = tableData;
              } else {
                this.allList = tableData;
              }
            } else {
              this.$toast(res.message);
            }
          });
      },
      getimgUrl(v) {
        let itemObj = {};
        for (let item of this.imgUrlList) {
          if (item.id == v) {
            itemObj = item;
          }
        }
        return itemObj.url;
      },
      //获取图片地址
      async listData(v) {
        console.log(v, "列表所有数据2");
        for (let i = 0; i < v.length; i++) {
          await getFileListByIds({ ids: v[i].attachment }).then((res) => {
            if (res.code == 200) {
              if (res.result.length > 0) {
                this.imgUrlList.push({
                  url: `${apiBaseUrlDownload}jksaas-mgt/mgt/${res.result[0].uri}`,
                  id: v[i].goodsId,
                });
              } else {
                this.imgUrlList.push({
                  url: require("../../../assets/img/noPicture.jpg"),
                  id: v[i].goodsId,
                });
              }
            } else {
            }
          });
        }
      },
      setColor(item) {
        if (
          Number(item.inventoryGoodsQualifiedNum) > Number(item.goodsQualifiedNum)
        ) {
          return "#ff4d4f";
        } else {
          return "#00b042";
        }
      },
      setColor2(item) {
        if (Number(item.inventoryGoodsScrapNum) > Number(item.goodsScrapNum)) {
          return "#ff4d4f";
        } else {
          return "#00b042";
        }
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  @import "@/views/workManagement/materialRequisition/materialDetail.scss";
  
  .no-pading{
    padding-bottom: 0 !important;
  }
  .d-head-left-box {
    width: 100%;
  }
  .tabs-atv-class {
    width: 100%;
    margin: 0 0 0rem -20px;
  }
  
  .pading-btm-0 {
    padding-bottom: 0;
  }
  
  .otherTaps {
    background: #ffffff;
    padding: 32px;
    margin-top: 20px;
    .title {
      padding-bottom: 20px;
      border-bottom: 1px solid #eeeeee;
      .icon {
        display: inline-block;
        width: 6px;
        height: 28px;
        background: #1890ff;
      }
      .content {
        width: 126px;
        height: 32px;
        font-size: 32px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #191f25;
        line-height: 44px;
        margin-left: 20px;
      }
    }
    .content {
      .row {
        font-size: 28px;
        font-family: PingFang SC;
        font-weight: 400;
        margin-top: 32px;
        display: flex;
        .r-label {
          color: #888888;
          display: block;
          // width: 0.7rem;
          //   border: 1px solid red;
        }
        .r-column {
          display: block;
          color: #191f25;
          width: 500px;
          //   border: 1px solid red;
          //    width: 1rem;
        }
      }
      .fhrow {
        display: flex;
        .fhImg {
          width: 110px;
          height: 110px;
          border-radius: 20px;
        }
        .rt-column {
          width: 510px;
          //   height: 2.55rem;
          margin-left: 40px;
          .rt-title {
            font-size: 32px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #191f25;
            margin-bottom: 32px;
          }
          .rt-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 46px;
            .column {
              //    border: 1px solid red;
              width: 300px;
              .column-t {
                font-size: 28px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #888888;
                display: block;
                width: 100%;
                margin-bottom: 6px;
              }
              .column-c {
                font-size: 32px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #191f25;
                display: block;
                width: 100%;
              }
            }
          }
        }
      }
    }
  }
  
  .numList {
    margin-bottom: 22px;
    // margin-top: 0.1rem;
    display: flex;
    background-color: #fff;
    justify-content: space-between;
  
    .item {
      width: 24%;
      padding: 30px 0 0 0;
  
      // border-right: 1px solid #F2F2F2;
      .ikey {
        margin-bottom: 32px;
        color: #999999;
      }
  
      p {
        margin-bottom: 0;
      }
    }
  
    .noBorder {
      border-right: none;
    }
  }
  
  .content {
    margin-left: 0 !important;
  }
  
  .rt-row {
    margin-bottom: 20px;
  
    .column {
      width: 100%;
      display: flex;
  
      .column-t {
        font-size: 28px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #888888;
        // margin-bottom: 0.03rem;
      }
  
      .column-c {
        flex: 1;
        font-size: 28px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #191f25;
        /* （超出限定的宽度就隐藏内容) */
        overflow: hidden;
        /* （设置文字在一行显示不能换行） */
        white-space: nowrap;
        /* （规定当文本溢出时显示省略符） */
        text-overflow: ellipsis;
      }
    }
  }
  
  // 盘点物品样式
  .goodsWrap {
    // margin-top: -0.1rem;
    //   不换行
    // white-space: nowrap;
    overflow: scroll;
    height: 65vh;
    padding-bottom: 100px;
  
    //   height: 4.9rem;
    .goodsList {
      .total {
        background: #f5f8ff;
        padding: 30px;
        color: #888888;
        font-size: 28px;
        margin-bottom: -20px;
      }
  
      .goodsBox {
        background: #fff;
        margin-top: 20px;
  
        .title {
          color: #191f25;
          font-weight: bold;
          font-size: 32px;
          border-bottom: 1px solid #f5f5f5;
          padding: 30px;
          margin: 0;
          margin-bottom: 32px;
        }
  
        .content {
          display: flex;
          padding: 30px;
          border-bottom: 1px solid #f5f5f5;
  
          .icon {
            width: 6px;
            height: 32px;
            background: #1890ff;
            margin-top: 6px;
            margin-right: 20px;
          }
  
          .right {
            // width: 2.8rem;
            width: 100%;
  
            // margin-left: 0.15rem;
            .top {
              display: flex;
              font-size: 32px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #191f25;
  
              .code {
                width: 560px;
                margin-bottom: 16px;
                word-break: break-word;
                /* 文本行的任意字内断开 */
  
                word-wrap: break-word;
                /* IE */
  
                white-space: -moz-pre-wrap;
                /* Mozilla */
  
                white-space: -hp-pre-wrap;
                /* HP printers */
  
                white-space: -o-pre-wrap;
                /* Opera 7 */
  
                white-space: -pre-wrap;
                /* Opera 4-6 */
  
                white-space: pre;
                /* CSS2 */
  
                white-space: pre-wrap;
                /* CSS 2.1 */
  
                white-space: pre-line;
                /* CSS 3 (and 2.1 as well, actually) */
              }
  
              img {
                height: 36px;
                margin-top: 6px;
                //   float: right;
              }
            }
  
            .btn {
              display: flex;
              justify-content: flex-start;
              flex-wrap: wrap;
  
              div {
                width: 50%;
  
                .key {
                  font-size: 28px;
                  color: #8888;
                  margin-bottom: 10px;
                }
  
                .val {
                  color: #191f25;
                  font-size: 32px;
                  margin-bottom: 10px;
                }
              }
            }
          }
        }
      }
    }
  
    .addgoods {
      background: #fff;
      font-size: 32px;
      text-align: center;
      height: 100px;
      line-height: 100px;
    }
  }
  
  .left {
    // width: 3.4rem;
  }
  
  .recordDetail {
    position: relative;
  }
  
  .tabs-f {
    // position: relative;
    // position: fixed;
    // top: 724px;
    // width: 100% !important;
    overflow-y: auto;
    flex: 1;
    // margin-top: 20px;
  }
  
  // /deep/ .van-tabs__nav{
  //     height: 0.44rem;
  //     width: 100%;
  // }
  .van-tab__pane {
    //     position: fixed;
  }
  
  .row {
    margin-top: 20px !important;
  }
  
  // /deep/ .van-tabs__nav {
  //   left: -35px;
  // }
  /deep/ .van-tabs__wrap {
    background: #fff;
  }
  
  div.pandianBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    top: -12px;
  }
  
  div.pandianResult {
    font-size: 22px;
    margin-top: 4px;
    color: #ff6c6c;
  }
  </style>
  